Hvordan sjekker jeg om et element er skjult i jQuery?

1
2
Neste
Siden spørsmålet refererer til et enkelt element, kan denne koden være mer passende:
// Sjekker CSS-innhold for visning: [none | block], ignorerer synlighet: [true | false]
$ (element) .is (": synlig");
// Det samme fungerer med skjult
$ (element) .is (": skjult");
Det er det samme som twernt's forslag, men brukes på et enkelt element; og den samsvarer med algoritmen som er anbefalt i jQuery FAQ.
Vi bruker jQuery's is () for å sjekke det valgte elementet med et annet element, velger eller et hvilket som helst jQuery-objekt. Denne metoden går gjennom DOM-elementene for å finne et samsvar som tilfredsstiller den passerte parameteren. Det vil være sant hvis det er samsvar, ellers returner det falskt.
|
Du kan bruke den skjulte velgeren:
// Matcher alle elementene som er skjult
$ ('element: skjult')
Og den synlige velgeren:
// Matcher alle elementene som er synlige
$ ('element: synlig')
|
if ($ (element) .css ('display') == 'none' || $ (element) .css ("synlighet") == "skjult") {
// 'element' er skjult
}
Metoden ovenfor tar ikke hensyn til foreldrenes synlighet. For å vurdere foreldrene også, bør du bruke .is (": skjult") eller .is (": synlig").
For eksempel,

 Div2 

Ovennevnte metode vil vurdere div2 synlig mens: synlig ikke. Men det ovennevnte kan være nyttig i mange tilfeller, spesielt når du trenger å finne ut om det er noen feildelinger synlige i den skjulte forelderen fordi i slike forhold: synlig vil ikke fungere.
|
Ingen av disse svarene adresserer det jeg forstår er spørsmålet, det er det jeg lette etter, "Hvordan håndterer jeg gjenstander som har synlighet: skjult?" Verken: synlig eller: skjult vil takle dette, ettersom de begge leter etter visning i henhold til dokumentasjonen. Så vidt jeg kunne fastslå, er det ingen velger for å håndtere CSS-synlighet. Slik løste jeg det (standard jQuery-velgere, det kan være en mer fortettet syntaks):
$ (". element"). hver (funksjon () {
hvis ($ (dette) .css ("synlighet") == "skjult") {
// håndtere ikke synlig tilstand
} annet {
// håndtere synlig tilstand
}
});
|
Fra hvordan bestemmer jeg tilstanden til et vekslet element?
Du kan bestemme om et element er kollapset eller ikke ved å bruke: synlige og: skjulte velgere.
var isVisible = $ ('# myDiv'). er (': synlig');
var isHidden = $ ('# myDiv'). er (': skjult');
Hvis du bare handler på et element basert på synligheten, kan du bare inkludere: synlig eller: skjult i velgeruttrykket. For eksempel:
$ ('# myDiv: synlig'). animer ({venstre: '+ = 200px'}, 'treg');
|
Ofte når du sjekker om noe er synlig eller ikke, kommer du til å gå rett fram umiddelbart og gjøre noe annet med det. jQuery-kjetting gjør dette enkelt.
Så hvis du har en velger, og du bare vil utføre noen handlinger hvis den er synlig eller skjult, kan du bruke filter (": synlig") eller filter (": skjult") etterfulgt av å kjede det med handlingen du vil ta.
Så i stedet for en if-uttalelse, slik:
hvis ($ ('# btnUpdate'). er (": synlig"))
{
$ ('# btnUpdate'). animere ({bredde: "veksle"}); // Skjul knapp
}
Eller mer effektiv, men enda styggere:
var-knapp = $ ('# btnUpdate');
hvis (button.is (": synlig"))
{
button.animate ({width: "toggle"}); // Skjul knapp
}
Du kan gjøre alt på en linje:
$ ('# btnUpdate'). filter (": synlig"). animere ({bredde: "veksle"});
|
Den: synlige velgeren i henhold til jQuery-dokumentasjonen:
De har en CSS-visningsverdi på ingen.
De er formelementer med type = "skjult".
Bredden og høyden er eksplisitt satt til 0.
Et forfedreelement er skjult, så elementet vises ikke på siden.
Elementer med synlighet: skjult eller opasitet: 0 anses å være synlige, siden de fortsatt bruker plass i oppsettet.
Dette er nyttig i noen tilfeller og ubrukelig i andre, for hvis du vil sjekke om elementet er synlig (display! = None), ignorerer foreldrenes synlighet, vil du oppdage at å gjøre .css ("display") == 'none 'er ikke bare raskere, men vil også returnere synlighetskontrollen riktig.
Hvis du vil sjekke synlighet i stedet for visning, bør du bruke: .css ("synlighet") == "skjult".
Ta også hensyn til de ekstra jQuery-merknadene:
Fordi: synlig er en jQuery-utvidelse og ikke er en del av CSS-spesifikasjonen, kan spørsmål som bruker: synlig ikke dra nytte av ytelsesforbedringen som tilbys av den opprinnelige DOM querySelectorAll () -metoden. For å oppnå best mulig ytelse når du bruker: synlig for å velge elementer, velg først elementene ved hjelp av en ren CSS-velger, og bruk deretter .filter (": synlig").
Hvis du er bekymret for ytelse, bør du også sjekke Nå ser du meg ... vis / skjul ytelse (2010-05-04). Og bruk andre metoder for å vise og skjule elementer.
|
Dette fungerer for meg, og jeg bruker show () og hide () for å gjøre div div skjult / synlig:
hvis ($ (dette) .css ('display') == 'none') {
/ * koden din kommer hit * /
} annet {
/ * alternativ logikk * /
}
|
Hvordan element synlighet og jQuery fungerer;
Et element kan skjules med skjerm: ingen,synlighet: skjult eller opasitet: 0. Forskjellen mellom disse metodene:
display: ingen skjuler elementet, og det tar ikke noe plass;
synlighet: skjult skjuler elementet, men det tar fortsatt plass i oppsettet;
opacity: 0 skjuler elementet som "synlighet: skjult", og det tar fortsatt plass i oppsettet; den eneste forskjellen er at opasitet lar en gjøre et element delvis gjennomsiktig;
hvis ($ ('. target'). er (': skjult')) {
$ ('. target'). show ();
} annet {
$ ('. target'). skjul ();
}
hvis ($ ('. target'). er (': synlig')) {
$ ('. target'). skjul ();
} annet {
$ ('. target'). show ();
}
hvis ($ ('. målsynlighet'). css ('synlighet') == 'skjult') {
$ ('. target-visibility'). css ({
synlighet: "synlig",
vise: ""
});
} annet {
$ ('. target-visibility'). css ({
synlighet: "skjult",
vise: ""
});
}
hvis ($ ('. target-visibility'). css ('opacity') == "0") {
$ ('. target-visibility'). css ({
opasitet: "1",
vise: ""
});
} annet {
$ ('. target-visibility'). css ({
opasitet: "0",
vise: ""
});
}
Nyttige jQuery-byttemetoder:
$ ('. klikk'). klikk (funksjon () {
$ ('. target'). veksle ();
});
$ ('. klikk'). klikk (funksjon () {
$ ('. target'). slideToggle ();
});
$ ('. klikk'). klikk (funksjon () {
$ ('. target'). fadeToggle ();
});
|
Du kan også gjøre dette ved hjelp av vanlig JavaScript:
funksjonen er gjengitt (domObj) {
hvis ((domObj.nodeType! = 1) || (domObj == document.body)) {
returner sant;
}
hvis (domObj.currentStyle && domObj.currentStyle ["display"]! = "none" && domObj.currentStyle ["synlighet"]! = "skjult") {
return isRendered (domObj.parentNode);
} annet hvis (window.getComputedStyle) {
var cs = document.defaultView.getComputedStyle (domObj, null);
if (cs.getPropertyValue ("display")! = "none" && cs.getPropertyValue ("synlighet")! = "skjult") {
return isRendered (domObj.parentNode);
}
}
returner falsk;
}
Merknader:
Fungerer overalt
Fungerer for nestede elementer
Fungerer for CSS og innebygde stiler
Krever ikke rammeverk
|
Jeg vil bruke CSS-klasse .hide {display: none! Important; }.
For å skjule / vise, kaller jeg .addClass ("hide") /. RemoveClass ("hide"). For å sjekke synlighet bruker jeg .hasClass ("skjul").
Det er en enkel og tydelig måte å sjekke / skjule / vise elementer på, hvis du ikke planlegger å bruke .toggle () eller .animate () -metoder.
|
Demolink
$ ('# clickme'). klikk (funksjon () {
$ ('# book'). toggle ('slow', function () {
// Animasjonen fullført.
varsel ($ ('# bok'). er (": synlig")); // <--- SANT hvis synlig falsk hvis skjult
});
});


Klikk her


Kilde:
Blogger Plug n Play - jQuery-verktøy og småprogram: Slik ser du om Element er skjult eller synlig ved hjelp av jQuery
|
Man kan ganske enkelt bruke det skjulte eller synlige attributtet, som:
$ ('element: skjult')
$ ('element: synlig')
Eller du kan forenkle det samme med er som følger.
$ (element) .is (": synlig")
|
ebdiv bør settes til style = "display: none;". Det fungerer både for show og skjul:
$ (dokument). klar (funksjon () {
$ ("# eb"). klikk (funksjon () {
$ ("# ebdiv"). veksle ();
});
});
|
Et annet svar du bør ta i betraktning er at hvis du skjuler et element, bør du bruke jQuery, men i stedet for å faktisk skjule det, fjerner du hele elementet, men du kopierer HTML-innholdet og selve koden til en jQuery-variabel, og deretter alt du trenger å gjøre er å teste om det er en slik tag på skjermen, ved å bruke den vanlige if (! $ ('# thetagname'). lengde).
|
Når du tester et element mot: skjult selektor i jQuery, bør det vurderes at et absolutt posisjonert element kan bli gjenkjent som skjult, selv om deres underordnede elementer er synlige.
Dette virker i utgangspunktet noe kontraintuitivt - selv om det å se nærmere på jQuery-dokumentasjonen gir relevant informasjon:
Elementer kan betraktes som skjulte av flere grunner: [...] Bredden og høyden deres er eksplisitt satt til 0. [...]
Så dette er fornuftig når det gjelder boksmodellen og den beregnede stilen for elementet. Selv om bredde og høyde ikke er angitt eksplisitt til 0, kan de settes implisitt.
Ta en titt på følgende eksempel:
console.log ($ ('. foo'). er (': skjult')); // sant
console.log ($ ('. bar'). er (': skjult')); // falsk
.foo {
posisjon: absolutt;
venstre: 10px;
topp: 10px;
bakgrunn: # ff0000;
}
.bar {
posisjon: absolutt;
venstre: 10px;
topp: 10px;
bredde: 20px;
høyde: 20px;
bakgrunn: # 0000ff;
}


 

Oppdatering for jQuery 3.x:
Med jQuery 3 vil den beskrevne oppførselen endre seg! Elementer vil bli ansett som synlige hvis de har noen layoutbokser, inkludert de med null bredde og / eller høyde.
JSFiddle med jQuery 3.0.0-alpha1:
http://jsfiddle.net/pM2q3/7/
Den samme JavaScript-koden vil da ha denne utgangen:
console.log ($ ('. foo'). er (': skjult')); // falsk
console.log ($ ('. bar'). er (': skjult'));// falsk
|
Dette kan fungere:
forvent ($ ("# message_div"). css ("display")). toBe ("none");
|
Eksempel:
$ (dokument). klar (funksjon () {
if ($ ("# checkme: hidden"). lengde) {
console.log ('Skjult');
}
});


   Kategori: Fisk

 Produkt: Laksatlantisk

 Specie: Salmo salar

 Form: Steker

|
For å sjekke om det ikke er synlig bruker jeg!:
hvis (! $ ('# book'). er (': synlig')) {
varsel ('# bok er ikke synlig')
}
Eller det følgende er også sam, og lagrer jQuery-velgeren i en variabel for å få bedre ytelse når du trenger det flere ganger:
var $ book = $ ('# book')
hvis (! $ book.is (': synlig')) {
varsel ('# bok er ikke synlig')
}
|
Bruk kursbytting, ikke stilredigering. . .
Å bruke klasser utpekt for å "skjule" elementer er enkelt og også en av de mest effektive metodene. Å bytte en klasse "skjult" med en skjermstil på "ingen" vil utføre raskere enn å redigere den stilen direkte. Jeg forklarte noe av dette ganske grundig i Stack Overflow-spørsmålet Slå to elementer synlige / skjulte i samme div.
JavaScript-fremgangsmåter og optimalisering av JavaScript
Her er en virkelig opplysende video av en Google Tech Talk av Googles frontingeniør Nicholas Zakas:
Fremskynde Javascriptet ditt (YouTube)
|
Eksempel på bruk av den synlige kontrollen for adblocker er aktivert:
$ (dokument). klar (funksjon () {
hvis (! $ ("# ablockercheck"). er (": synlig"))
$ ("# ablockermsg"). tekst ("Deaktiver adblocker."). show ();
});

 
 
"ablockercheck" er en ID som adblocker blokkerer. Så hvis du sjekker om det er synlig, kan du oppdage om adblocker er slått på.
|
Ingen av eksemplene passer tross alt for meg, så jeg skrev mine egne.
Tester (ingen støtte for Internet Explorer-filter: alfa):
a) Sjekk om dokumentet ikke er skjult
b) Sjekk om et element har null bredde / høyde / opasitet eller skjerm: ingen / synlighet: skjult i innebygde stiler
c) Sjekk om senteret (også fordi det er raskere enn å teste hver piksel / hjørne) av elementet ikke er skjult av andre elementer (og alle forfedre, eksempel: overløp: skjult / bla / ett element over et annet) eller skjermkanter
d) Sjekk om et element har null bredde / høyde / opasitet eller skjerm: ingen / synlighet: skjult i beregnede stiler (blant alle forfedre)
Testet på
Android 4.4 (Native browser / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac WebKit), Internet Explorer (Internet Explorer 5-11 document modes + Internet Explorer 8 on a virtuell maskin) og Safari (Windows / Mac / iOS).
var is_visible = (funksjon () {
var x = window.pageXOffset? window.pageXOffset + window.innerWidth - 1: 0,
y = window.pageYOffset? window.pageYOffset + window.innerHøyde - 1: 0,
relativ = !! ((! x &&! y) ||! document.elementFromPoint (x, y));
funksjon inne (barn, foreldre) {
mens (barn) {
hvis (barn === foreldre) returnerer sant;
barn = child.parentNode;
}
returner falsk;
};
returfunksjon (elem) {
hvis (
document.hidden ||
elem.offsetWidth == 0 ||
elem.offsetHeight == 0 ||
elem.style.visibility == 'skjult' ||
elem.style.display == 'none' ||
elem.style.opacity === 0
) returner falsk;
var rett = elem.getBoundingClientRect ();
hvis (relativt) {
hvis (! inni (document.elementFromPoint (rect.left + elem.offsetWidth / 2, rect.top + elem.offsetHeight / 2), elem)) returner false;
} eller hvis (
! inside (document.elementFromPoint (rect.left + elem.offsetWidth / 2 + window.pageXOffset, rect. top + elem.offsetHeight / 2 + window.pageYOffset), elem) ||
(
rect.top + elem.offsetHeight / 2 <0 ||
rect.left + elem.offsetWidth / 2 <0 ||
rect.bottom - elem.offsetHeight / 2> (window.innerHeight || document.documentElement.clientHeight) ||
rect.right - elem.offsetWidth / 2> (window.innerWidth || document.documentElement.clientWidth)
)
) returner falsk;
hvis (window.getComputedStyle || elem.currentStyle) {
var el = elem,
comp = null;
mens (el) {
hvis (el === dokument) {pause;} annet hvis (! el.parentNode) returnerer false;
comp = window.getComputedStyle? window.getComputedStyle (el, null): el.currentStyle;
hvis (comp && (comp.visibility == 'skjult' || comp.display == 'none' || (typeof comp.opacity! == 'udefinert' && comp.opacity! = 1))) returner false;
el = el.parentNode;
}
}
returner sant;
}
}) ();
Hvordan å bruke:
is_visible (elem) // boolean
|
Du må sjekke både ... Skjerm og synlighet:
if ($ (this) .css ("display") == "none" || $ (this) .css ("synlighet") == "skjult") {
// Elementet er ikke synlig
} annet {
// Elementet er synlig
}
Hvis vi ser etter $ (dette) .is (": synlig"), sjekker jQuery automatisk for begge tingene.
|
Kanskje du kan gjøre noe slikt
$ (dokument). klar (funksjon () {
var synlig =$ ('# tElement'). er (': synlig');
hvis (synlig) {
varsel ("synlig");
// Kode
}
ellers
{
varsel ("skjult");
}
});

 Fornavn 
|
Bare sjekk synligheten ved å se etter en boolsk verdi, som:
if (this.hidden === false) {
// Koden din
}
Jeg brukte denne koden for hver funksjon. Ellers kan du bruke er (': synlig') for å kontrollere synligheten til et element.
|
Fordi elementer med synlighet: skjult eller opasitet: 0 anses å være synlige, siden de fortsatt bruker plass i oppsettet (som beskrevet for jQuery: synlig velger) - kan vi sjekke om elementet virkelig er synlig på denne måten:
funksjonen erElementReallyHidden (el) {
returner $ (el) .is (": skjult") || $ (el) .css ("synlighet") == "skjult" || $ (el) .css ('opacity') == 0;
}
var booElementReallyShowed =! isElementReallyHidden (someEl);
$ (someEl) .parents (). hver (funksjon () {
hvis (isElementReallyHidden (dette)) {
booElementReallyShowed = false;
}
});
|
Men hva om elementets CSS er som følger?
.element{
posisjon: absolutt; venstre: -9999;
}
Så dette svaret på Stack Overflow-spørsmålet. Hvordan sjekke om et element er utenfor skjermen, bør også vurderes.
|
En funksjon kan opprettes for å sjekke for synlighets- / visningsattributter for å måle om elementet vises i brukergrensesnittet eller ikke.
function checkUIElementVisible (element) {
return ((element.css ('display')! == 'none') && (element.css ('synlighet')! == 'skjult'));
}
Arbeidsfele
|
Her er også et ternært betinget uttrykk for å kontrollere tilstanden til elementet og deretter veksle det:
$ ('someElement'). on ('click', function () {$ ('elementToToggle'). is (': visible')? $ ('elementToToggle'). hide ('slow'): $ ('elementToToggle ') .show (' treg ');});
|
hvis ($ ('# postcode_div'). er (': synlig')) {
hvis ($ ('# postcode_text'). val () == '') {
$ ('# spanPost'). tekst ('\ u00a0');
} annet {
$ ('# spanPost'). tekst ($ ('# postcode_text'). val ());
}
|
1
2
Neste
Svært aktivt spørsmål. Tjen 10 rykte for å svare på dette spørsmålet. Omdømmekravet hjelper deg med å beskytte dette spørsmålet mot spam og ikke-svar-aktivitet.
Er ikke svaret du leter etter? Bla gjennom andre spørsmål merket javascript jquery dom synlighet eller still ditt eget spørsmål.